<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            background-color: bisque
        }
        .container{
            margin: 200px;
            position: relative;
            border: 1px solid red;
            width: 300px;
            height: 200px;
          
        }
        .container img{
            width: 300px;
            height: 200px;
            /* 利用绝对定位把图片重叠起来 */
            position: absolute; 
            /* 改变其转动的原点位置 x轴中心 y轴400px处 */
            transform-origin: center 200%;
            -webkit-transform-origin: center 200%;
            box-shadow: 1px 1px 5px 2px #ddd
        }
        .container img:first-child{
            /* 初始状态下正向偏移5度 */
            transform: rotate(5deg);
            /* 设置过渡 hover时改变其偏移的角度 */
            transition: transform 0.7s linear;
            -webkit-transition: transform 0.7s linear;
        }
        .container img:last-child{
            /* 初始状态下反向偏移5度 */
            transform: rotate(-5deg);
            transition: transform 0.7s linear;
            -webkit-transition: transform 0.7s linear;
        }
        .container:hover img:first-child{
            /* hover 时 正向偏移25度 */
            transform: rotate(25deg);
            -webkit-transform: rotate(25deg);
        }
        .container:hover img:last-child{
            /* hover 时 反向偏移25度 */
            transform: rotate(-25deg);
            -webkit-transform: rotate(-25deg);
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="./../images/mobile1.jpg" alt="">
        <img src="./../images/mobile2.jpg" alt="">
        <img src="./../images/mobile3.jpg" alt="">
    </div>
</body>
</html>